<{include file="wiget/header.tpl"}>
<{include file="wiget/navbar.tpl"}>
<script src="/static/jquery.min.js"></script>
<link rel="stylesheet" href="/static/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/static/ztree/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="/static/ztree/jquery.ztree.exedit-3.5.min.js"></script>
<SCRIPT type="text/javascript">
		<!--
		var setting = {
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false
			},
			edit: {
				enable: true,
				editNameSelectAll: true,
				
				drag: {
					autoExpandTrigger: true,
					prev: dropPrev,
					inner: dropInner,
					next: dropNext
				}
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				//beforeDrag: beforeDrag,
				beforeDrop: beforeDrop,
				beforeDragOpen: beforeDragOpen,
				onDrag: onDrag,
				onDrop: onDrop,
				onExpand: onExpand,
				
				onClick:onClick,
				
				beforeDrag: beforeDrag,
				beforeEditName: beforeEditName,
				beforeRemove: beforeRemove,
				beforeRename: beforeRename,
				onRemove: onRemove,
				onRename: onRename
			}
		};
		
		var zNodes =<{$json}>;
		
		var log, className = "dark";
		function beforeDrag(treeId, treeNodes) {
			return false;
		}
				
		function beforeEditName(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return true;	
		}
		function beforeRemove(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			if(treeNode.isParent) {alert('父根节点不能直接删除! 请先删除其下的子节点!'); return false;}
			return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
		}
		function onRemove(e, treeId, treeNode) {
			showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			dbDelTree(treeNode.id);
		}
		function beforeRename(treeId, treeNode, newName) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			if (newName.length == 0) {
				alert("节点名称不能为空.");
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				setTimeout(function(){zTree.editName(treeNode)}, 10);
				return false;
			}
			return true;
		}
		function onRename(e, treeId, treeNode) {
			dbUpdateTree(treeNode.id,treeNode.name);
			showLog("[ "+getTime()+" onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
		}
		function showLog(str) {
			if (!log) log = $("#log");
			log.append("<li class='"+className+"'>"+str+"</li>");
			if(log.children("li").length > 8) {
				log.get(0).removeChild(log.children("li")[0]);
			}
		}
		function getTime() {
			var now= new Date(),
			h=now.getHours(),
			m=now.getMinutes(),
			s=now.getSeconds(),
			ms=now.getMilliseconds();
			return (h+":"+m+":"+s+ " " +ms);
		}

		var newCount = 1;
		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.id
				+ "' title='add node' onfocus='this.blur();'></span>";
			sObj.append(addStr);
			var btn = $("#addBtn_"+treeNode.id);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				var new_id = dbAddTree(treeNode.id,'新节点名'+newCount);
				zTree.addNodes(treeNode, {id:new_id, pId:treeNode.id, name:"新节点名" + (newCount++)});
				//location.reload();
				return false;
			});
		};
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.id).unbind().remove();
		};
		function selectAll() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			
			zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
		}
		
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			$("#selectAll").bind("click", selectAll);
			
			//$("#callbackTrigger").bind("change", {}, setTrigger);
		});
		
		
		//拖动部分的函数:
		
		function dropPrev(treeId, nodes, targetNode) {
			var pNode = targetNode.getParentNode();
			if (pNode && pNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					var curPNode = curDragNodes[i].getParentNode();
					if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
						return false;
					}
				}
			}
			return true;
		}
		function dropInner(treeId, nodes, targetNode) {
			if (targetNode && targetNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					if (!targetNode && curDragNodes[i].dropRoot === false) {
						return false;
					} else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) {
						return false;
					}
				}
			}
			return true;
		}
		function dropNext(treeId, nodes, targetNode) {
			var pNode = targetNode.getParentNode();
			if (pNode && pNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					var curPNode = curDragNodes[i].getParentNode();
					if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
						return false;
					}
				}
			}
			return true;
		}

		var curDragNodes, autoExpandNode;  //log, className = "dark", 前面已有
		function beforeDrag(treeId, treeNodes) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeDrag ]&nbsp;&nbsp;&nbsp;&nbsp; drag: " + treeNodes.length + " nodes." );
			for (var i=0,l=treeNodes.length; i<l; i++) {
				if (treeNodes[i].drag === false) {
					curDragNodes = null;
					return false;
				} else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
					curDragNodes = null;
					return false;
				}
			}
			curDragNodes = treeNodes;
			return true;
		}
		function beforeDragOpen(treeId, treeNode) {
			autoExpandNode = treeNode;
			return true;
		}
		function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
			className = (className === "dark" ? "":"dark");
			if(treeNodes[0].isParent && true == isCopy){alert('父节点不支持复制! 请手动增加!');return false;}
			showLog("[ "+getTime()+" beforeDrop ]&nbsp;&nbsp;&nbsp;&nbsp; moveType:" + moveType);
			showLog("target: " + (targetNode ? targetNode.name : "root") + "  -- is "+ (isCopy==null? "cancel" : isCopy ? "copy" : "move"));
			return true;
		}
		function onDrag(event, treeId, treeNodes) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" onDrag ]&nbsp;&nbsp;&nbsp;&nbsp; drag: " + treeNodes.length + " nodes." );
		}
		function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
			dbDropNode(treeNodes, targetNode, moveType, isCopy);
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" onDrop ]&nbsp;&nbsp;&nbsp;&nbsp; moveType:" + moveType);
			showLog("target: " + (targetNode ? targetNode.name : "root") + "  -- is "+ (isCopy==null? "cancel" : isCopy ? "copy" : "move"))
		}
		function onExpand(event, treeId, treeNode) {
			if (treeNode === autoExpandNode) {
				className = (className === "dark" ? "":"dark");
				showLog("[ "+getTime()+" onExpand ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name);
			}
		}

		function setTrigger() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.setting.edit.drag.autoExpandTrigger = $("#callbackTrigger").attr("checked");
		}
		
//验证 函数   操作合法性的验证
//后台操作:
	function dbAddTree(pid,name) {
			//console.log('<{url r="jsdata/treeop"}>');
			$.post('<{url r="jsdata/treeop"}>', {'op':'add','pid':pid,'name':name}, function(data) {
				//reloadData();
			});
	}

	function dbUpdateTree(id,name) {
		$.post('<{url r="jsdata/treeop"}>', {'op':'update','id':id,'name':name}, function(data) {
			//reloadData();
		});
	}
	
	function dbDelTree(id) {
		$.post('<{url r="jsdata/treeop"}>', {'op':'del', 'id':id}, function(data) {
		});
	}
	
	function dbDropNode(treeNodes, targetNode, moveType, isCopy) {
		console.log('treeNodes: '+treeNodes + '  targetNode: '+targetNode + '  moveType: ' + moveType + '   isCopy:'+isCopy);
		$.post('<{url r="jsdata/treeop"}>', {'op':'drop', 'treeNodes':treeNodes, 'targetNode':targetNode, 'moveType':moveType, 'isCopy':isCopy}, function(data) {
			//reloadData();
			console.log(data);
		});
	}
	
	function onClick(event, treeId, treeNode) {
			$('#choose_name').html(treeNode.name);
			$('#node_id').html(treeNode.id);
			$.post('<{url r="jsdata/treenote"}>', {'op':'get', 'id':treeNode.id}, function(data) {
				$('#node_note').val(data);
			});
}
//测试函数
	</SCRIPT>

<div id='left'>
</div>

<div id='content'>
<div class="container-fluid">
		<ul class="breadcrumb">
			<li>扩展模块 <span class="divider">/</span></li>
			<li class="active">树形分类</li>
		</ul>
		<div class="well" style="min-height: 510px;">
			
			<b>设置英文名字:</b><em id="choose_name" ></em>=><input id="node_note" name="node_note" value="请选择节点..."/>
	    <span class="ui-button ui-button-l"><a onclick="javascript:update();">修改名字</a></span>
		<div style="display:none" id="node_id"></div>
			<ul id="treeDemo" class="ztree"></ul>
		</div>
	</div>
</div>
<script>

function update() {
			var node_id = $('#node_id').html();
			var val = $('#node_note').val();
			if(''==node_id || '请选择节点...'== val) {alert('还没选定节点.');return false;}
			$.post('<{url r="jsdata/treenote"}>', {'op':'update', 'id':node_id, 'val':val}, function(data) {
			//alert(data);
				if(1 == data) {
					alert('名字不能重复,请重新输入.');
				}else {
					//$('#node_note').val(data);
					alert('修改成功!');
				}
			});
}
</script>
</body>
</html>